<template>
  <div class="content">
    <div class="head">
      <div class="line"></div>
      <div class="headtitle">访客信息</div>
    </div>

    <div class="customerinfo">
      <div style="width: 100%;height: 20px;margin-top: 10px" class="head">
      <span  class="ct1">姓名：</span>
      <span  class="ct2" v-if="data">{{data.name}}</span>
      </div>
      <div style="width: 100%;height: 20px;margin-top: 10px" class="head">
        <span  class="ct1">手 机 号：</span>
        <span  class="ct2" v-if="data">{{data.mobile}}</span>
      </div>
      <div style="width: 100%;height: 20px;margin-top: 10px" class="head">
        <span  class="ct1">产品类型：</span>
        <span  class="ct2" v-if="data">{{data.productCategory}}</span>
      </div>
      <div style="width: 100%;height: 20px;margin-top: 10px" class="head">
        <span  class="ct1">身份证：</span>
        <span  class="ct2" v-if="data">{{data.ID}}</span>
      </div>

      <div class="opsf">
        <div class="truefalse">是否是学生:</div>
        <RadioGroup v-model="isxuesheng" style="margin-top: 10px;width: 120px">
          <Radio label="是"></Radio>
          <Radio label="否"></Radio>
        </RadioGroup>

        <div class="truefalse">是否是军人:</div>
        <RadioGroup v-model="isjunren" style="margin-top: 10px;width: 120px">
          <Radio label="是"></Radio>
          <Radio label="否"></Radio>
        </RadioGroup>

      </div>

    </div>



    <div class="head" style="margin-top: 20px">
      <div class="line"></div>
      <div class="headtitle">用户文件</div>
    </div>

    <div class="file">
       <div class="op">

         <div class="filetitle" @click="collectionform">收集信息</div>
         <div class="ct1" style="text-align: center;width: 90%;margin-top: 20px">用户证件图片</div>
         <div class="filetitle" @click="getformdata">获取表单</div>
         <div v-if="formdata">
           <Modal
             v-model="showformdata"
             title="表单内容"
             content=""
             ok-text="确定"
             cancel-text = "关闭"
           >
             <div v-show="formdata.name" class="form">客户名:{{formdata.name}}</div>
             <div v-show="formdata" class="form">身份证:{{formdata.ID}}</div>
             <div v-show="formdata.age" class="form">年龄:{{formdata.age}}</div>
             <div v-show="formdata.mobile" class="form">手机号:{{formdata.mobile}}</div>
             <div v-show="formdata.address" class="form">住址:{{formdata.address}}</div>
           </Modal>
         </div>


       </div>
       <div class="pic" v-show="showall">
         <div class="icon" @click="showPic(1)">
           <img v-if="data" :src="data.frontPhoto" preview="1" width="100%" height="100%" class="userimage">
         </div>
         <div class="icon" @click="showPic(2)">
           <img  v-if="data" :src="data.backPhoto"  preview="1" width="100%" height="100%" class="userimage">
         </div>
         <div class="icon" @click="showPic(3)">
           <img v-if="data" :src="data.bankCardPhoto" preview="1" width="100%" height="100%" class="userimage">
         </div>
         <div class="icon" @click="showPic(4)">
           <img  v-if="data" :src="data.selfie" preview="1" width="100%" height="100%" class="userimage">
         </div>
       </div>

       <div v-show="!showall">
         <div class="iconone" @click="showBig()">
           <img v-if="showimage" :src="showimage" preview="1" width="100%" height="100%" class="bigimage">
         </div>

         <div class="op">
           <div class="opbtn" @click="showall=true">返回</div>
           <div class="opbtn" @click="cameraagain()">采集照片</div>
         </div>

       </div>

    </div>

    <!--<viewer :images="images" height="100%" width="100%" v-show="">-->
      <!--<img v-for="item in images" :src="item.url" :key="item.index" width="100%" height="100%">-->
    <!--</viewer>-->

  </div>
</template>

<script>
  export default {
    name: "AILeft",
    props:['data','formdata'],
    data(){
      return{
        isjunren:"否",
        isxuesheng:"否",
        showall:true,
        showimage:null,
        images:[],
        index:0,
        showformdata:false,
      }
    },
    methods:{

      /**/
      collectionform(){
        this.$emit('collectionform');
      },
      /*获取客户提交的表单信息*/
      getformdata(){
        this.$emit('getformdata');
      },

      /*大图预览*/
      showPic(index){
          if (this.data){
            if (index == 1){
              this.showimage = this.data.frontPhoto;
            } else if (index == 2){
              this.showimage = this.data.backPhoto;
            }else if (index == 3){
              this.showimage = this.data.bankCardPhoto;
            }else if (index == 4){
              this.showimage = this.data.selfie;
            }
            this.showall = false;
            this.index= index-1;
            this.images =[];
            this.images.push(this.data.frontPhoto);
            this.images.push(this.data.backPhoto);
            this.images.push(this.data.bankCardPhoto);
            this.images.push(this.data.selfie);
            this.$previewRefresh();//
          }
      },

      /*重新收集更新照片1234-前后银行自己*/
      cameraagain(){
        this.$emit('collectionPic',this.index+1);
        this.showall = true;
      },

      /*单个大图预览*/
      showBig(){
          this.$preview.on('imageLoadComplete',(e,item)=>{
            console.log(this.$preview.self)
          })
      },

      takephoto(){
        this.$emit('takephoto');
      },
      handsign(){
        this.$emit('handsign');
      },

      handsignagain(){
        this.$emit('handsignagain');
      },
      uploadfile(){
        this.$emit('uploadfile');
      },
      addwater(){
        this.$emit('addwater');
      },

      addbackgroup(){
        this.$emit('addbackgroup');
      },
    }
  }
</script>

<style scoped>

  .content{
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
  }

  .head{
    /*font-family:PingFang SC;*/
    /*font-weight:bold;*/
    /*color:rgba(51,51,51,1);*/
    /*font-size: 15px;*/
    width: 100%;
    /*height: 50px;*/
    /*line-height: 50px;*/
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
  }

  .headtitle{
    width:100%;
    height:40px;
    font-size:14px;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:40px;
    text-align: left;
    margin-left: 10px;
  }

  .customerinfo{
    width:100%;
    height:160px;
    background:rgba(255,255,255,1);
    box-shadow:1px 1px 8px 1px rgba(44,137,234,0.13);
    border-radius:2px;
  }

  .line{
    width:2px;
    height:15px;
    background:rgba(44,137,234,1);
    border-radius:1px;
    margin-left: 20px;
    margin-top: 13px;
  }

  .img{
    width: 40px;
    height: 40px;
  }

  .ct1{
    width:80px;
    height:10px;
    font-size:14px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height:10px;
    margin-left: 20px;
    text-align: left;
  }

  .ct2{
    /*width:80px;*/
    height:10px;
    font-size:14px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height:10px;
    left: 0px;
    text-align: left;
  }

  .opsf{
    width:100%;
    height:40px;
    background:rgba(247,248,249,1);
    border-radius:0px 0px 2px 2px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
  }

  .truefalse{
    margin-left: 20px;
    font-family:PingFang SC;
    margin-top: 10px;
    color:rgba(58,152,255,1);
    margin-right: 0px;
    width:90px;
    text-align: left;
  }

  .file{
    width: 100%;
    height: 300px;
    background:rgba(255,255,255,1);
    box-shadow:5px 7px 49px 5px rgba(44,137,234,0.13);
    border-radius:10px;
  }

  .pic{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    width: 100%;
    box-sizing: content-box;
  }

  .icon{
    width: 150px;
    height: 100px;
    background:rgba(246,246,246,1);
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 20px;
  }

  .iconone{
    width: 90%;
    margin-left: 5%;
    height: 140px;
    margin-top: 20px;
    background:rgba(246,246,246,1);
  }

  .userimage{
    object-fit: contain;
    /*transform:rotate(90deg);*/
    /*-ms-transform:rotate(7deg); !* IE 9 *!*/
    -webkit-transform:rotate(360deg); /* Safari and Chrome */
  }

  .bigimage{
    object-fit: contain;
    /*transform:rotate(90deg);*/
    /*-ms-transform:rotate(7deg); !* IE 9 *!*/
    -webkit-transform:rotate(360deg);
  }

  .op{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    width: 90%;
    margin-left: 5%;
  }

  .opbtn{
    width:40%;
    height:40px;
    margin-left: 5%;
    margin-top: 20px;
    background:rgba(246,246,246,1);
    line-height: 40px;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(121,121,121,1);
  }


  .filetitle{
    width:120px;
    height:30px;
    border:1px solid rgba(184,184,184,1);
    line-height: 30px;
    margin-top: 10px;
  }


</style>
